<template>
  <a-drawer
    v-model:open="store.openDrawer"
    class="drawer"
    width="800px"
    title="投递详情"
    placement="right"
    :closable="false"
  >
    <template #extra>
      <a-icon type="icon-CloseButton" class="icon" @click="handleClose"></a-icon>
    </template>
    <a-form :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
      <!-- 投递人 -->
      <a-form-item label="投递人">
        <a-input v-model:value="formData.userName" placeholder="请输入投递人" :disabled="true" />
      </a-form-item>
      <!-- 职位 -->
      <a-form-item label="职位">
        <a-input v-model:value="formData.positionName" placeholder="请输入职位" :disabled="true" />
      </a-form-item>
      <!-- 公司 -->
      <a-form-item label="公司">
        <a-input v-model:value="formData.companyName" placeholder="请输入公司" :disabled="true" />
      </a-form-item>
      <!-- 工作地 -->
      <a-form-item label="工作地">
        <a-input v-model:value="formData.location" placeholder="请输入工作地" :disabled="true" />
      </a-form-item>
      <!-- 应届/往届 -->
      <a-form-item label="应届/往届">
        <a-input v-model:value="formData.gen" placeholder="请选择应届/往届" :disabled="true">
        </a-input>
      </a-form-item>
      <!-- 学历 -->
      <a-form-item label="学历">
        <a-input v-model:value="formData.bg" placeholder="请选择学历" :disabled="true"> </a-input>
      </a-form-item>
      <!-- 创建时间 -->
      <a-form-item label="创建时间">
        <a-input
          v-model:value="formData.createTime"
          placeholder="请输入创建时间"
          :disabled="true"
        />
      </a-form-item>
      <!-- 状态 -->
      <a-form-item label="状态">
        <a-input v-model:value="formData.status" placeholder="请选择状态" :disabled="true">
        </a-input>
      </a-form-item>
      <!-- 操作 -->
      <a-form-item label="简历">
        <a-button type="link" @click="handleResume"> {{ formData.profileId }} </a-button>
      </a-form-item>
      <a-form-item label="审批">
        <a-space direction="vertical">
          <a-radio-group v-model:value="isPass" :options="plainOptions" />
        </a-space>
      </a-form-item>
    </a-form>
    <div class="button-group">
      <a-button type="primary" class="edit-button" @click="addInfo">提交</a-button>
    </div>
  </a-drawer>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import server from '@/api/index'
import { useTodoInfo } from '@/stores/todoSrore'
import { useUserStore } from '@/stores/userStore'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'

const store = useTodoInfo()
const userStore = useUserStore()
// 表单数据
const isPass = ref(null)
const plainOptions = [
  {
    label: '发起邀约',
    value: true,
  },
  {
    label: '忽略投递',
    value: false,
  },
]
const formData = ref({
  userName: '',
  positionName: '',
  companyName: '',
  location: '',
  gen: '',
  bg: '',
  createTime: '',
  status: '',
  operation: '',
  profileId: '',
  id: '',
})
const addInfo = () => {
  if (!isPass.value) return
  if (isPass.value) {
    console.log(formData)
    handlePass()
  } else {
    handleWithdraw()
  }
}
const handlePass = async () => {
  try {
    const res = await server.addInvitation({
      hrId: userStore.userAccount,
      hrName: userStore.userTureName,
      positionName: formData.value.positionName,
      positionId: formData.value.positionId,
      userId: formData.value.userId,
      userName: formData.value.userName,
      companyId: formData.value.companyId,
      companyName: formData.value.companyName,
    })
    if (res?.data.code === 0) {
      const res = await server.updateApplicationStatus({
        id: formData.value.id,
        status: 2,
      })
      if (res?.data.code === 0) {
        getMyTodoList()
      }
    } else {
      message.warning(res.data.message)
    }
  } catch (e) {
    message.error(e)
  }
}
const handleWithdraw = async item => {
  try {
    const res = await server.updateApplicationStatus({
      id: formData.value.id,
      status: 3,
    })
    if (res?.data.code === 0) {
      getMyTodoList()
    } else {
      message.warning(res.data.message)
    }
  } catch (e) {
    message.error(e)
  }
}
const getMyTodoList = async () => {
  try {
    const res = await server.getListMyHrApplicationVOByPage({
      current: store.page,
      pageSize: store.pageSize,
      userId: userStore.userAccount,
    })
    if (res.data.code === 0) {
      store.todoList = res.data.data.records
      store.total = res.data.data.total
      store.todoList.forEach(item => {
        item.createTime = dayjs(res.data.data.records.createTime).format('YYYY/MM/DD')
        switch (item.status) {
          case 1:
            item.status = '待处理'
            break
          case 2:
            item.status = '已回复'
            break
          case 3:
            item.status = '已拒绝'
            break
        }
      })
      message.success(res.data.message)
    } else {
      message.error(res.data.message)
    }
  } catch (e) {
    message.error(e)
  }
}

const handleClose = () => {
  store.openDrawer = false
  store.editData = {}
  isPass.value = null
}

watch(
  () => store.openDrawer,
  val => {
    if (val) {
      isPass.value = null
      formData.value = { ...store.editData }
      if (store.editData.duration) {
        formData.value.duration = [dayjs(store.editData.startDate), dayjs(store.editData.endDate)]
      }
    }
  },
)
</script>

<style lang="scss" scoped>
.icon {
  font-size: 14px;
  cursor: pointer;
}

.button-group {
  display: flex;
  justify-content: space-between;
  width: 93%;
  margin-left: 23px;

  .edit-button {
    width: 100%;
  }
}

:deep(.ant-input-disabled) {
  border: none;
  background-color: #fff;
  color: #000;
}

:deep(.ant-picker-disabled) {
  border: none;
  background-color: #fff;
  color: #000;
}

:deep(.ant-picker-input > input[disabled]) {
  color: #000;
}
</style>
